import React from 'react';
import { styled } from 'styled-components';

interface BtnGroupProps {
  title: string;
  status: string;
  children: React.ReactNode;
}

const Container = styled.div`
  .currentStatus {
    color: var(--info-color);
    font-size: var(--font-size-base);
  }
`;

const BtnGroup: React.FC<BtnGroupProps> = ({ title, status, children }) => {
  return (
    <Container className="flex items-center justify-between">
      {/* 标题及当前状态 */}
      <div className="flex items-center">
        <div className="m-r-3">{title}</div>
        <div className="currentStatus">{status}</div>
      </div>
      {/* 按钮组 */}
      <div>{children}</div>
    </Container>
  );
};

export default BtnGroup;
